<template>
  <u-modal v-model="show" title="经办人审批" show-cancel-button @confirm="handlerConfirm">
    <view class="slot-content">
      <!-- 审批人意见 -->
      <view class="form-item flex">
        <text class="item-label">审批人意见:</text>
        <text class="item-value" style="padding-left: 30rpx;">可以</text>
      </view>
      <!-- 审批结果 -->
      <view class="form-item flex">
        <text class="item-label">审批结果:</text>
        <text class="item-value">
          <u-radio-group size="24" v-model="params.status" activeColor="#2979ff">
            <u-radio v-for="item in lgreedList" :key="item.value" :label="item.label" :name="item.value" labelSize="24">{{
              item.label }}</u-radio>
          </u-radio-group>
        </text>
      </view>
      <!-- 审批意见 -->
      <view class="form-item flex" style="height: auto;padding-top: 20rpx;">
        <text class="item-label">审批意见:</text>
        <view class="item-value">
          <u-input type="textarea" placeholder="请输入审批意见" />
        </view>
      </view>
    </view>
  </u-modal>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)

const params = ref({
  id: "",
  status: "2",
  dealeropinion: "",
})
const lgreedList = ref([{
  label: '同意',
  value: '2'
},
{
  label: '主管审批',
  value: '3'
}, {
  label: '拒绝',
  value: '1'
}
])

const open = () => {
  show.value = true
}

const close = () => {
  show.value = false
}

const handlerConfirm = () => {
  // 这里可以添加确认逻辑
  close()
}

defineExpose({ open, close })
</script>

<style scoped lang="scss">
.slot-content {
  padding: 20rpx;
  width: 100%;
  padding-right: 0;

  .form-item {
    width: 100%;
    height: 100rpx;
    border-bottom: 1rpx solid #f5f5f5;
    font-size: 28rpx;
    padding: 0 20rpx;

    .item-label {
      width: 150rpx;
    }

    .item-value {
      flex: 1;
    }
  }
}
</style>